<template>
    <f7-page class="news-feed">
        <f7-navbar>
            <f7-nav-center>好友动态</f7-nav-center>
        </f7-navbar>
        <f7-card class="news-card self-card sub-news-card">
            <f7-card-header>
                <h3 class="tit">
                    <f7-link href="/news/detail/">欧洲冠军联赛小组赛抽签，皇马、多特蒙德、热刺同组；巴塞罗那抽到尤文图斯；巴黎与拜仁同组。</f7-link>
                    <span class="author-info">作者：王文清&emsp;09-03 12:30</span>
                </h3>
                <f7-link class="img-wrap" href="/news/detail/">
                    <img class="img-fit" src="../../assets/images/test.jpg" alt="">
                </f7-link>
            </f7-card-header>
            <f7-card-footer>
                <div class="new-toast">
                    <f7-badge color="orange">4条新叨叨</f7-badge>
                </div>
                <div class="news-info-bar clearfix">
                    <span class="comment-count">评论<em>3.5万</em></span>
                    <span class="commentators">张大大，陈二二，王三三，张大大，陈二二，王三三</span>
                </div>
                <div class="comment-list">
                    <div class="reply-list clearfix">
                        <ul>
                            <li class="hot">
                                <div class="block">
                                    <div class="hd">
                                        <div class="avatar">
                                            <f7-link class="img-wrap" href="/newsFeed/profile/">
                                                <img src="../../assets/images/test.jpg" alt="">
                                            </f7-link>
                                            <f7-icon fa="venus" color="pink"></f7-icon>
                                        </div>
                                        <div class="user-info">
                                            <f7-link color="red" href="/newsFeed/profile/">林二二</f7-link> @楼主
                                            <span class="floor">1楼</span>
                                        </div>
                                    </div>
                                    <div class="bd">爱我中华民国！！！</div>
                                    <div class="ft clearfix">
                                        <span class="date">08-29 21:56</span>
                                        <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                    </div>
                                </div>
                            </li>
                            <li class="hot">
                                <div class="block">
                                    <div class="hd">
                                        <div class="avatar">
                                            <f7-link class="img-wrap" href="/newsFeed/profile/">
                                                <img src="../../assets/images/test.jpg" alt="">
                                            </f7-link>
                                            <f7-icon fa="venus" color="pink"></f7-icon>
                                        </div>
                                        <div class="user-info">
                                            <f7-link class="role" href="/newsFeed/profile/">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                                <f7-icon fa="user-secret"></f7-icon>
                                            </f7-link>
                                            <f7-link color="red" href="/newsFeed/profile/">赵四强</f7-link> @1楼
                                            <span class="floor">2楼</span>
                                        </div>
                                    </div>
                                    <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                                    <div class="ft clearfix">
                                        <span class="date">08-29 21:56</span>
                                        <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                    </div>
                                </div>
                            </li>
                            <li class="hot">
                                <div class="block">
                                    <div class="hd">
                                        <div class="avatar">
                                            <f7-link class="img-wrap" href="/newsFeed/profile/">
                                                <img src="../../assets/images/test.jpg" alt="">
                                            </f7-link>
                                            <f7-icon fa="mars" color="blue"></f7-icon>
                                            <!-- <f7-icon fa="venus"></f7-icon> -->
                                        </div>
                                        <div class="user-info">
                                            <f7-link class="role" href="/newsFeed/profile/">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                                <f7-icon fa="user-secret"></f7-icon>
                                            </f7-link>
                                            <f7-link color="red" href="/newsFeed/profile/">张大大</f7-link> @1楼
                                            <span class="floor">3楼</span>
                                        </div>
                                    </div>
                                    <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                                    <div class="ft clearfix">
                                        <span class="date">08-29 21:56</span>
                                        <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <f7-link class="more">30条叨叨>></f7-link>
                    </div>
                </div>
            </f7-card-footer>
        </f7-card>
        <f7-card class="news-card self-card sub-news-card">
            <f7-card-header>
                <h3 class="tit">
                    <f7-link href="/news/detail/">欧洲冠军联赛小组赛抽签，皇马、多特蒙德、热刺同组；巴塞罗那抽到尤文图斯；巴黎与拜仁同组。</f7-link>
                    <span class="author-info">作者：王文清&emsp;09-03 12:30</span>
                </h3>
                <f7-link class="img-wrap" href="/news/detail/">
                    <img class="img-fit" src="../../assets/images/test.jpg" alt="">
                </f7-link>
            </f7-card-header>
            <f7-card-footer>
                <div class="new-toast">
                    <f7-badge color="orange">4条新叨叨</f7-badge>
                </div>
                <div class="news-info-bar clearfix">
                    <span class="comment-count">评论<em>3.5万</em></span>
                    <span class="commentators">张大大，陈二二，王三三，张大大，陈二二，王三三</span>
                </div>
                <div class="comment-list">
                    <div class="reply-list clearfix">
                        <ul>
                            <li class="hot">
                                <div class="block">
                                    <div class="hd">
                                        <div class="avatar">
                                            <f7-link class="img-wrap" href="/newsFeed/profile/">
                                                <img src="../../assets/images/test.jpg" alt="">
                                            </f7-link>
                                            <f7-icon fa="venus" color="pink"></f7-icon>
                                        </div>
                                        <div class="user-info">
                                            <f7-link color="red" href="/newsFeed/profile/">林二二</f7-link> @楼主
                                            <span class="floor">1楼</span>
                                        </div>
                                    </div>
                                    <div class="bd">爱我中华民国！！！</div>
                                    <div class="ft clearfix">
                                        <span class="date">08-29 21:56</span>
                                        <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                    </div>
                                </div>
                            </li>
                            <li class="hot">
                                <div class="block">
                                    <div class="hd">
                                        <div class="avatar">
                                            <f7-link class="img-wrap" href="/newsFeed/profile/">
                                                <img src="../../assets/images/test.jpg" alt="">
                                            </f7-link>
                                            <f7-icon fa="venus" color="pink"></f7-icon>
                                        </div>
                                        <div class="user-info">
                                            <f7-link class="role" href="/newsFeed/profile/">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                                <f7-icon fa="user-secret"></f7-icon>
                                            </f7-link>
                                            <f7-link color="red" href="/newsFeed/profile/">赵四强</f7-link> @1楼
                                            <span class="floor">2楼</span>
                                        </div>
                                    </div>
                                    <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                                    <div class="ft clearfix">
                                        <span class="date">08-29 21:56</span>
                                        <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                    </div>
                                </div>
                            </li>
                            <li class="hot">
                                <div class="block">
                                    <div class="hd">
                                        <div class="avatar">
                                            <f7-link class="img-wrap" href="/newsFeed/profile/">
                                                <img src="../../assets/images/test.jpg" alt="">
                                            </f7-link>
                                            <f7-icon fa="mars" color="blue"></f7-icon>
                                            <!-- <f7-icon fa="venus"></f7-icon> -->
                                        </div>
                                        <div class="user-info">
                                            <f7-link class="role" href="/newsFeed/profile/">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                                <f7-icon fa="user-secret"></f7-icon>
                                            </f7-link>
                                            <f7-link color="red" href="/newsFeed/profile/">张大大</f7-link> @1楼
                                            <span class="floor">3楼</span>
                                        </div>
                                    </div>
                                    <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                                    <div class="ft clearfix">
                                        <span class="date">08-29 21:56</span>
                                        <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <f7-link class="more">30条叨叨>></f7-link>
                    </div>
                </div>
            </f7-card-footer>
        </f7-card>
        <p class="load-more">
            <f7-link>查看更多>></f7-link>
        </p>
        <main-toolbar></main-toolbar>
    </f7-page>
</template>

<style lang="scss">
@import "../../assets/css/common.scss";
.news-feed {
  .sub-news-card {
    .tit {
      max-height: 35px;
      overflow: hidden;
    }

    .author-info {
      position: absolute;
      bottom: 8px;
      color: #ccc;
    }

    .card-header {
      &:after {
        content: "";
        display: block;
        width: auto;
        right: 15px;
        left: 15px;
        border-bottom: 1px dotted #999;
      }
    }
  }

  .author-info {
    font-size: 12px;
  }

  .news-info-bar {
    font-size: 12px;
  }

  .comment-count {
    color: #333;

    em {
      font-style: normal;
      color: #e51c23;
    }
  }

  .commentators {
    max-width: 50%;
    float: right;
    color: #259b24;
    @extend %ellipsis;
  }

  .new-toast {
    text-align: center;
    margin-bottom: 15px;

    .badge {
      display: inline-block;
      min-width: 100px;
    }
  }

  .news-info-bar {
    padding-bottom: 8px;
    margin-bottom: 0 !important;
    border-bottom: 1px dotted #ddd;
  }

  .comment-list {
    .reply-list {
      background: none;

      ul {
        padding: 10px 0 0 0;
        margin: 0;
      }
    }

    li {
      position: relative;
      padding: 10px 10px 0 0;

      &.hot {
        &:before,
        &:after {
          position: absolute;
          z-index: 0;
        }

        &:before {
          content: "";
          width: 0;
          height: 0;
          top: 0;
          right: 0;
          border-width: 35px;
          border-style: solid;
          border-color: #eee #eee transparent transparent;
        }

        &:after {
          content: "\F091";
          display: inline-block;
          font: normal normal normal 14px/1 FontAwesome;
          font-size: 35px;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          top: 4px;
          right: 2px;
          color: #ffb854;
        }
      }
    }

    a.link {
      i.icon {
        display: inline-block;
      }
    }

    .user-info {
      a.link {
        display: inline;
        height: auto;
        line-height: inherit;
      }
    }

    .avatar {
      a.link {
        margin-top: 0;
        height: 40px;
        line-height: inherit;
      }
    }
  }

  .load-more {
      text-align: center;
  }
}
</style>

<script>
import mainToolbar from "../components/mainToolbar.vue";
export default {
  components: {
    mainToolbar
  }
};
</script>
